<template>
  <div class="dialog">
    <el-dialog
      :visible.sync="show"
      :width="width || '90%'"
      :close-on-click-modal="false"
      :custom-class="customClass"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <div slot="title">
        {{ title }}
      </div>
      <div
        class="dialog-body"
      >
        <slot />
      </div>
      <div
        v-if="showConfirmButton || showCancelButton || showOtherButton"
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          v-if="showCancelButton"
          @click="onCancel"
        >
          {{ cancelButtonText }}
        </el-button>
        <el-button
          v-if="showOtherButton"
          :type="otherType"
          @click="onOther"
        >
          {{ otherButtonText }}
        </el-button>
        <el-button
          v-if="showConfirmButton"
          type="primary"
          @click="onConfirm"
        >
          {{ confirmButtonText }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    showCancelButton: {
      type: Boolean,
      default: true
    },
    showOtherButton: {
      type: Boolean,
      default: false
    },
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '50%'
    },
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    confirmButtonText: {
      type: String,
      default: '确定'
    },
    otherButtonText: {
      type: String,
      default: '其他'
    },
    title: {
      type: String,
      default: '提示'
    },
    customClass: {
      type: String,
      default: ''
    },
    otherType: {
      type: String,
      default: ''
    },
    cancel: {
      type: [Function, String],
      default: ''
    },
    other: {
      type: [Function, String],
      default: ''
    },
    confirm: {
      type: [Function, String],
      default: ''
    }
  },
  computed: {
    show: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
        return val
      }
    }
  },
  methods: {
    onConfirm() {
      this.confirm && typeof this.confirm === 'function' ? this.confirm(() => {
        this.show = false
      }) : this.hideDialog()
    },
    onCancel() {
      this.cancel && typeof this.cancel === 'function' ? this.cancel(() => {
        this.show = false
      }) : this.hideDialog()
    },
    onOther() {
      this.other && typeof this.other === 'function' ? this.other(() => {
        this.show = false
      }) : this.hideDialog()
    },
    hideDialog() {
      this.show = false
    },
    handleClose() {
      this.$emit('before-close')
    }
  }
}
</script>

<style lang="scss">
.dialog {
  .el-dialog__header {
    padding: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    background: #2f448a;
    border-radius: 2px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
  }
  .el-dialog__headerbtn {
    top: 10px;
    .el-dialog__close {
      color: #fff;
      font-size: 20px;
    }
  }
  .el-dialog__body {
    padding: 15px 20px;
  }
  .el-dialog{
    border-radius: 6px;
    overflow: hidden;
  }
}
</style>
